<%--
  Created by IntelliJ IDEA.
  User: ldh
  Date: 2024/10/21
  Time: 9:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="/js/vue.js"></script>
    <%--axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--elementui--%>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 必须在引入vue文件后 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        html, body, #app {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        .el-container {
            height: 100%;
        }

        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            background-color: #545c64;
            color: #333;
            height: 100%;
        }

        .el-main {
            background-color: #FFFCF5;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 30%;height:100%;float:left;background: #13ce66"></div>
            <div style="width: 40%;height:100%;float:left;background: red"></div>
            <div style="width: 30%;height:100%;float:right;text-align: right;line-height: 60px;">
                <el-dropdown style="margin-top: 10px" @command="handleCommand">
                  <span class="el-dropdown-link">
                   <el-avatar :src="userinfo.url"></el-avatar>
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">基本信息</el-dropdown-item>
                        <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="230px">
                <%--
                    el-menu: 菜单组件
                       default-active:默认选中项
                       @open="handleOpen": 打开事件
                       @close="handleClose" 关闭事件
                       background-color="#545c64" 背景色
                       text-color="#fff" 文字颜色
                --%>
                <el-menu
                        default-active="2"
                        :unique-opened="true"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu v-for="menu in leftMenus" :index="menu.mid+''">
                        <template slot="title"><i :class="menu.icon"></i>{{menu.mname}}</template>
                        <el-menu-item v-for="child in menu.children" :index="child.mid+''">
                            <a :href="child.murl" target="main" style="text-decoration: none;color: white;"><i :class="child.icon"></i>{{child.mname}}</a>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe src="/view/home.jsp" name="main" width="100%" height="100%" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            userinfo: {},//当前用户信息
            leftMenus:[],//左侧菜单
        },
        created() {
            //加载当前用户的信息.
            this.loadUserinfo();
            //加载左侧菜单
            this.loadLeftMenu();
        },
        methods: {
            //加载左侧菜单
            loadLeftMenu() {
                axios.get("/menu/leftMenu").then(resp => {
                    this.leftMenus = resp.data.data;
                })
            },
            //下列事件
            handleCommand(command) {
                if (command === 'logout') {
                    axios.get("/staff/logout").then(resp => {
                        if (resp.data.code === 200) {
                            //弹出消息
                            this.$message.success(resp.data.msg);
                            //跳转页面
                            location.href = "/login.jsp";
                        } else {
                            //弹出消息
                            this.$message.error(resp.data.msg);
                        }
                    })
                } else if (command === 'info') {

                } else {

                }
            },
            //加载当前用户信息
            loadUserinfo() {
                axios.get("/staff/getCurrentUser").then(resp => {
                    this.userinfo = resp.data.data;
                })
            }
        }
    })
</script>
</html>
